<template>
  <div class="container-fluid ">
<TopBar></TopBar>
<div class="box">
  <div style="color: aliceblue;" class="hello-bar">

  <h1 style="color: yellow;"> PassLink.cn</h1> 

  <p>
    本网站所展示的部分公开资料来源于互联网，转载使用的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

    在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。
    
    对于网站因不可抗力或不能控制的原因造成的问题，本网站不承担任何责任，但将尽力减少因此而给用户造成的损失和影响。
    
    凡以任何方式直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。
    
    本网站所提供的信息，只供参考之用。
  </p>    
<br>
<br>
<p>
  The public information displayed on this website is sourced from the internet and is reproduced for the purpose of transmitting more information and sharing online. It does not mean that this website agrees with its views or is responsible for its authenticity, nor does it constitute any other suggestions.
  To the extent permitted by law, this website hereby declares that it shall not be liable for any direct, indirect, incidental, subordinate, special, punitive or punitive damages caused by the user or any person's use or failure to use the information or any links provided on this website.
  We do not assume any responsibility for any issues caused by force majeure or uncontrollable reasons on the website, but will do our best to reduce the losses and impacts caused to users as a result.
  Anyone who directly or indirectly uses the materials on this website in any way shall be deemed to have voluntarily accepted the constraints stated on this website.
  The information provided on this website is for reference only.
</p>
      <hr>

      <p>
        如果您发现网站上有侵犯您的知识产权的作品（包含文字信息、图片、字体、产品等），请与我们 QQ:2890598862 取得联系，我们会及时修改或删除。
      </p>

      <p>本站处于试运营阶段</p>
      <h4 style="color: yellow;">

        如果您在使用中发现bug,请与我们 QQ:2890598862 取得联系，我们会及时更新和修改并同步至开源仓库。
      </h4>
     
  </div>

<div class="img-run">
    <div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleRide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleRide" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleRide" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#carouselExampleRide" data-bs-slide-to="3" aria-label="Slide 4"></button>
            <button type="button" data-bs-target="#carouselExampleRide" data-bs-slide-to="4" aria-label="Slide 5"></button>
            <button type="button" data-bs-target="#carouselExampleRide" data-bs-slide-to="5" aria-label="Slide 6"></button>
          </div>
        <div class="carousel-inner ">
          <div class="carousel-item active">
           
            <img src="../assets/about/1.png" class="d-block " alt="PASSLINK.CN">
           
          </div>
          <div class="carousel-item">
            <img src="../assets/about/2.png" class="d-block " alt="PASSLINK.CN">
          </div>
          <div class="carousel-item">
            <img src="../assets/about/3.png" class="d-block " alt="PASSLINK.CN">
          </div>
          <div class="carousel-item active">
            <img src="../assets/about/4.png" class="d-block " alt="PASSLINK.CN">
          </div>
          <div class="carousel-item">
            <img src="../assets/about/5.png" class="d-block " alt="PASSLINK.CN">
          </div>
          <div class="carousel-item">
            <img src="../assets/about/6.png" class="d-block " alt="PASSLINK.CN">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>

</div>

<div class="img-2">
    <img src="../assets/about/75.png"  class="img-fluid" alt="...">
</div>

<div class="mp4-img">
    <video loop autoplay muted >
        <source src="../assets/about/12.mp4" type="video/mp4">
       
      </video>
    

</div >

<div class="left-img">
  <div class="right-img">
    <div>
        <br>
        <br>
       <p>建设本站点目的：</p>
       <p><span>复习VUE，SpringBoot,Mysql知识，学习vite,pinia,ts等新方式。
        本次网站全程独立完成，完成时间2023.12.10。大三下学期开始找相关实习，
        本次开发模式更接近行业开发标准，无论结果如何。只要热爱的东西就值得花费时间，
        人生的意义不就是To do list 嘛，相信不久的将来，得到自己想要的，
        成为自己想成为的。大家一起加油哦。</span></p>
    </div>
    <div>
        <img class="rounded mx-auto d-block" src="../assets/about/31.png" alt="PASSLINK.CN">
        <audio controls style="width:100%;" preload="auto">
            <source src="../assets/about/3179.mp3"  type="audio/mp3">     
            Your browser does not support the audio tag.
          </audio>
       
    </div>
</div>
<div class="right-img">
    <div>
        <img class="rounded mx-auto d-block" src="../assets/about/56.png" alt="">
    </div>
    <div style="padding-left:10%">
        <br>
        <br>
    
       <p>从哪学的：</p>
       <p><span>大一开始被学长骗了2000，买了他们自己录的垃圾教学视频。后来偶然机会参加了学校的暑假训练营，学习前端知识，于是自学之路由此开始。互联网到处都有资源，只要耐性够，总会找到的。哔哩哔哩这么大的教学平台确实很NICE。还有一些公益性的知识分享网站，GitHub,Gitee上都有许多优秀的项目，慢慢学。不要遇到困难就气馁，学会用搜索引擎，搜自己需要的，辨别自己确定的，收藏觉得有价值的。编程行业最重要的就是不断的敲，不断地模仿，不断的复制，才有能力超越。</span></p>
    </div>
    
</div>
</div>


<div class="img-2">
    <img  src="../assets/about/53.png"  class="img-fluid" alt="...">
</div>

</div>
<BottomBar></BottomBar>
  </div>
</template>
<script setup lang="ts">

</script>
<style lang="scss" scoped>


.container-fluid {
    background-color: $passlink-bg-color;
    .box{

    width: 100%;
    background-color: $passlink-bg-color;
    height: auto;
    margin: auto;
    .hello-bar{
      width: 100%;
      height: auto;
      
      background-color: $passlink-bg-color;
      padding:50px 20px 0 50px ;
      p{
        text-indent: 4ch;
      }
    }
    .img-run{
        width: 100%;
            img{
              width: $passlink-full-width;
                height: auto;
                margin: auto;
            }
          
         
        
      
        }
    }
    .img-2{

      img{
        margin: auto;
        width: 100%;
        position: relative;
       
      }
    }
    .mp4-img{

       
        video{
            width:  100%;        
            margin: auto;       
            object-fit: cover; /* 等比例缩放视频以填充容器 */
        }
    }
    .right-img{
        display: flex;
        color: $passlink-font-color-white;
        p{
            width: 80%;
            font-size:$passlink-font-size16;
            font-weight: bold;
            span{
                font-size:$passlink-font-size14;
                font-weight:lighter;
            }
        }
     
    }
}

@media screen and (max-width: $passlink-media-max-width-4) {
  .left-img{
    display: none;

  }
}
</style>
